/** biome-ignore-all lint/a11y/noSvgWithoutTitle: xx */

import { useState } from "react";
import Menu, { type MenuDirection, type MenuItem } from "@/components/Menu";
import RadioGroup, { type RadioOption } from "@/components/RadioGroup";
import Badge from "@/components/Badge";

export default function Menus() {
  return (
    <div>
      <div>menus</div>
      <BasicMenu />
      <DirectionOfMenu />
      <OnlyIconMenu />
      <SizeOfMenu />
      <WithIconMenu />
      <WithIconsAndBadgesMenu />
      <WithTitleMenu />
      <SubMenu />
    </div>
  );
}

const title = "text-xl font-bold mt-4 mb-2";

const OPTIONS_DIRECTIONS: RadioOption[] = [
  { label: "Horizontal", value: "horizontal" },
  { label: "Vertical", value: "vertical" },
];

const OPTIONS_SIZES: RadioOption[] = [
  { label: "xs", value: "xs" },
  { label: "sm", value: "sm" },
  { label: "md", value: "md" },
  { label: "lg", value: "lg" },
  { label: "xl", value: "xl" },
];

type MenuIt = Omit<MenuItem, "key">;

const MENU_DATA1: MenuIt[] = [
  { label: "Item 1" },
  { label: "Item 2", disabled: true },
  { label: "Item 3", active: true },
];

const MENU_DATA2: MenuIt[] = [
  { label: "Title", title: true },
  { label: "Item 1" },
  { label: "Item 2" },
  { label: "Item 3" },
];

function BasicMenu() {
  return (
    <>
      <h2 className={title}>Basic Menu</h2>
      <Menu className="w-60" data={MENU_DATA1.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

function DirectionOfMenu() {
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  return (
    <>
      <h2 className={title}>Menu Direction</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <Menu direction={direction} data={MENU_DATA1.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

function IconHome() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
      />
    </svg>
  );
}

function IconInfo() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
      />
    </svg>
  );
}

function IconSignal() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
      />
    </svg>
  );
}

function OnlyIconMenu() {
  const data: MenuIt[] = [
    { label: <IconHome /> },
    { label: <IconInfo /> },
    { label: <IconSignal /> },
  ];
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  return (
    <>
      <h2 className={title}>Icon Menu</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <Menu direction={direction} data={data.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

// TODO: tooltip

function SizeOfMenu() {
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  const [size, setSize] = useState<Size | undefined>();
  return (
    <>
      <h2 className={title}>Menu Size</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_SIZES}
        value={size}
        onChange={(v) => setSize(v as Size)}
      />
      <Menu
        direction={direction}
        size={size}
        data={MENU_DATA1.map((it, i) => ({ ...it, key: `${i}` }))}
      />
    </>
  );
}

function WithIconMenu() {
  const data: MenuIt[] = [
    {
      label: (
        <>
          <IconHome />
          Home
        </>
      ),
    },
    {
      label: (
        <>
          <IconInfo />
          Info
        </>
      ),
    },
    {
      label: (
        <>
          <IconSignal />
          Signal
        </>
      ),
    },
  ];
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  return (
    <>
      <h2 className={title}>Menu with Icons</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <Menu direction={direction} data={data.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

function WithIconsAndBadgesMenu() {
  const data: MenuIt[] = [
    {
      label: (
        <>
          <IconHome />
          Inbox
          <Badge size="xs">99+</Badge>
        </>
      ),
    },
    {
      label: (
        <>
          <IconInfo />
          Updates
          <Badge size="xs" status="warning">
            NEW
          </Badge>
        </>
      ),
    },
    {
      label: (
        <>
          <IconSignal />
          Signal
          <Badge size="xs" status="info" />
        </>
      ),
    },
  ];
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  return (
    <>
      <h2 className={title}>Menu with Icons And Badges</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <Menu direction={direction} data={data.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

function WithTitleMenu() {
  return (
    <>
      <h2 className={title}>Menu Title</h2>
      <Menu className="w-60" data={MENU_DATA2.map((it, i) => ({ ...it, key: `${i}` }))} />
    </>
  );
}

const MENU_DATA3: MenuItem[] = [
  { label: "Item 1", key: "1" },
  {
    label: "Parent",
    key: "2",
    sub: [
      { label: "Submenu 1", key: "2-1" },
      { label: "Submenu 2", key: "2-2" },
      {
        label: "Parent",
        key: "2-3",
        sub: [
          { label: "Submenu 3-1", key: "2-3-1" },
          { label: "Submenu 3-2", key: "2-3-2" },
        ],
      },
    ],
  },
  { label: "Item 3", key: "3" },
];

function SubMenu() {
  const [direction, setDirection] = useState<MenuDirection | undefined>();
  return (
    <>
      <h2 className={title}>Sub Menu</h2>
      <RadioGroup
        className="my-2"
        size="sm"
        options={OPTIONS_DIRECTIONS}
        value={direction}
        onChange={(v) => setDirection(v as MenuDirection)}
      />
      <Menu direction={direction} data={MENU_DATA3} />
    </>
  );
}

// TODO: collapsable
